<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>视频</title>
    <!--semantic-ui-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link th:href="@{/qinjiang/css/qinstyle.css}" rel="stylesheet">
</head>
<body>


<!--主容器-->
<div class="ui container">

    <div th:replace="~{/commons/common::nav-menu(active='video.html')}"></div>

    <!--中间主体-->
    <div>
        <div class="ui pointing secondary menu">
            <a class="item active" data-tab="first">Java</a>
            <a class="item" data-tab="second">前端</a>
            <a class="item" data-tab="third">运维</a>
            <a class="item" data-tab="four">数据结构与算法</a>
        </div>
        <div class="ui tab segment active" data-tab="first">
            <div class="ui divided items">

                <div class="item">
                    <div class="image">
                        <img th:src="@{/qinjiang/images/test-index-page.jpg}">
                    </div>
                    <div class="content">
                        <a class="header" th:href="@{/video/toPlay}">Java零基础入门教程</a>
                        <div class="description">
                            <p>
                                适合Java 0基础，Java初学入门，系统的学习这门编程语言! <br>
                                如果您是非计算机专业，想转行做Java开发的朋友，或者您想让Java基础更扎实，这个将是你无二的选择！<br>
                            </p>
                        </div>
                        <div class="extra">
                            <div class="ui orange label">推荐</div>
                            <div class="ui label">免费</div>
                            <a class="ui right floated primary button" th:href="@{/video/toPlay}">
                                去学习 <i class="right chevron icon"></i>
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="ui tab segment" data-tab="second"></div>
        <div class="ui tab segment" data-tab="third"></div>
        <div class="ui tab segment" data-tab="four"></div>

    </div>


    <div th:replace="~{/commons/common::common-footer}"></div>

</div>


<script th:src="@{/qinjiang/js/jquery-3.1.1.min.js}"></script>
<script th:src="@{/qinjiang/js/semantic.min.js}"></script>
<script>
    //选项卡
    $('.menu .item').tab();
</script>


</body>
</html>